<template>
  <div>
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
             label-width="80px">
      <!--   	<el-form-item label="操作类型" prop="operationTypeId">-->
      <!--   			 <el-radio v-model="dataForm.operationTypeId" label="1">充值</el-radio>-->
      <!--   			 <el-radio v-model="dataForm.operationTypeId" label="2">扣费</el-radio>-->
      <!--   			 <el-radio v-model="dataForm.operationTypeId" label="3">退款</el-radio>-->
      <!--   	</el-form-item>-->
      <el-form-item label="支付类型" prop="payTypeId">
        <el-select v-model="dataForm.payTypeId" placeholder="请选择">
          <el-option
            v-for="item in payTypeList"
            :key="item.payMethodId"
            :label="item.payMethodName"
            :value="item.payMethodId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="充值金额" prop="rechargeAmount">
        <el-input-number v-model="dataForm.rechargeAmount" placeholder="充值金额"></el-input-number>
      </el-form-item>
      <el-form-item label="赠送金额" prop="giveAmout">
        <el-input-number v-model="dataForm.giveAmout" placeholder="赠送金额"></el-input-number>
      </el-form-item>
      <el-form-item label="销售人员" prop="salesmanList">
        <el-button icon="el-icon-plus" type="primary" @click="getSalesman" size="small">选择销售人员</el-button>
        {{ showStaff }}
      </el-form-item>
      <el-form-item label="备注" prop="备注">
        <el-input type="textarea" v-model="dataForm.remark" placeholder=""></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
   	<el-button @click="visible = false">取消</el-button>
   	<el-button type="primary" @click="dataFormSubmit()" :disabled="disabledSubmit">确定</el-button>
   </span>

    <el-dialog center title="选择销售人员" :visible.sync="salemanVisile" width="65%" append-to-body>
      <el-checkbox-group v-model="dataForm.salemanList">
        <el-row :gutter="20">
          <el-col :span="8" v-for="sale in salemanList" :key="sale.staffId">
            <el-card>
              <el-checkbox :label="sale.staffId">
                <div>姓名:{{ sale.staffName }}</div>
                <div>电话:{{ sale.staffTel }}</div>
                <div>性别:{{ sale.staffSex === 1 ? '男' : '女' }}</div>
              </el-checkbox>
            </el-card>
            <br>
          </el-col>
        </el-row>
      </el-checkbox-group>
      <span slot="footer" class="dialog-footer">
		<el-button @click="salemanVisile = false">取消</el-button>
		<el-button type="primary" @click="getSaleMans()">确定</el-button>
	</span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  components:{

  },

  data() {
    return {
      showStaff: [],
      salemanVisile: false,
      visible: false,
      salemanList: [],
      payTypeList: [],
      dataForm: {
        id: 0,
        serialNumber: '',
        memberId: '',
        sellerId: '',
        operationTypeId: '1',
        payTypeId: '',
        rechargeAmount: 0,
        giveAmout: 0,
        salesman: '',
        createTime: '',
        createUserId: '',
        remark: '',
        salemanList: [],
        memberTypeId: '',
      },
      dataRule: {
        serialNumber: [
          {required: true, message: '流水号不能为空', trigger: 'blur'}
        ],
        memberId: [
          {required: true, message: '会员ID不能为空', trigger: 'blur'}
        ],
        sellerId: [
          {required: true, message: '租户不能为空', trigger: 'blur'}
        ],
        operationTypeId: [
          {required: true, message: '操作类型不能为空', trigger: 'blur'}
        ],
        payTypeId: [
          {required: true, message: '支付类型不能为空', trigger: 'blur'}
        ],
        rechargeAmount: [
          {required: true, message: '充值金额不能为空', trigger: 'blur'}
        ],
        giveAmout: [
          {required: true, message: '赠送金额不能为空', trigger: 'blur'}
        ],
        createTime: [
          {required: true, message: '操作时间不能为空', trigger: 'blur'}
        ],
        createUserId: [
          {required: true, message: '操作人不能为空', trigger: 'blur'}
        ],
        remark: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ]
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    getSaleMans() {
      var arr = []
      this.dataForm.salemanList.forEach(item => {
        this.salemanList.forEach(items => {
          if (item === items.staffId) {
            arr.push(items.staffName)
          }
        })
      })
      this.showStaff = arr
      this.salemanVisile = false
    },

    getSalesman() {
      this.$http({
        url: this.$http.adornUrl('/store/tstorestaff/list'),
        method: 'get',
        params: this.$http.adornParams({
          status: 1,
          key:''
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.salemanList = data.page.list
        } else {
          this.salemanList = []
        }
      })
      this.salemanVisile = true
    },


    clearData(){
      this.showStaff = ''
      this.salemanList = []
      this.dataForm = {
        salemanList: []
      }
    },

    init(row) {
      this.dataForm.memberTypeId = row.memberTypeId
      this.dataForm.memberId = row.id
      //获取支付类型
      this.$http({
        url: this.$http.adornUrl('/store/tstorepaymethod/list'),
        method: 'get',
        params: this.$http.adornParams({
          'status': 1,
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.payTypeList = data.page.list
        } else {
          this.dataList = []
          this.totalPage = 0
        }
      })
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/store/tstorememberrechargerecord/${!this.dataForm.id ? 'save' : 'update'}`),
            method: 'post',
            data: this.$http.adornData({
              'id': this.dataForm.id || undefined,
              'serialNumber': this.dataForm.serialNumber,
              'memberId': this.dataForm.memberId,
              'sellerId': this.dataForm.sellerId,
              'operationTypeId': this.dataForm.operationTypeId,
              'payTypeId': this.dataForm.payTypeId,
              'rechargeAmount': this.dataForm.rechargeAmount,
              'giveAmout': this.dataForm.giveAmout,
              'salesman': this.dataForm.salesman,
              'createTime': this.dataForm.createTime,
              'createUserId': this.dataForm.createUserId,
              'remark': this.dataForm.remark,
              'salemanList': this.dataForm.salemanList,
              'memberTypeId': this.dataForm.memberTypeId
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.dataForm.operationTypeId = ''
              this.dataForm.rechargeAmount = ''
              this.dataForm.giveAmout = ''
              this.dataForm.remark = ''
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('getDataM',this.dataForm.memberId)
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    }
  }
}
</script>
